<template>
  <div class="you">
    <!-- 你可能还喜欢 -->
    <div class="ai">
      <span class="xian"></span>
      <img src="../../public/img/aixin.png" alt="" />
      <!-- <i class="iconfont icon-aixin"></i> -->
      <span>你可能还喜欢</span>
    </div>

    <section>
      <!-- :onrefresh="refresh" -->
      <scroller
        class="scrollerStyle"
        :on-infinite="infinite"
        ref="my_scroller"
      >
        <!-- 中间是要下拉刷新和加载的内容 -->
        <div class="left" v-for="(val, key) in xi" :key="key"  @click="sg(key)">
          <router-link to="/xiang">
            <div>
              <img :src="val.shopSrc" alt="" />
            </div>
            <div>
              <p>{{ val.shopFont }}</p>
              <span class="jia">{{ val.shopMoney }}</span>
              <span class="iconfont icon-jiarugouwuche gouWu"></span>
            </div>
          </router-link>
        </div>
      </scroller>
    </section>
  </div>
</template>

<script>
import bus from "@/bus.js";
export default {
  data() {
    return {
      xi: [],
    };
  },
  mounted() {
    // 获取数据
    this.$axios.get('http://47.114.130.21:3002/youLove').then((data)=>{
      // console.log(data);
      if(data.status==200){
        this.xi=data.data.xi;
      }
    }).catch((err)=>{
      console.log(err);
    });
  },
  methods: {
    sg(id) {
      // 第一种
      setTimeout(() => {
        bus.$emit("myHeader", {
          src: this.xi[id].shopSrc,
          title: this.xi[id].shopFont,
          money: this.xi[id].shopMoney,
        });
      }, 200);
    },
    // 加载更多
    infinite: function (done) {
      $(".pull-to-refresh-layer").hide();
      console.log("infinite");
      this.page++;
      //console.log(this.page);
      //console.log(this.totalPages);
      if (this.page > this.totalPages) {
        this.page = this.totalPages;
        this.$refs.my_scroller.finishInfinite(true);
      } else {
        window.clearTimeout(this.timers);
        this.timers = setTimeout(() => {
          clientList(
            //后台的api
            this.defaultsupplier,
            this.linkName,
            this.page,
            this.pageSize
          ).then((res) => {
            Indicator.close();
            this.totalPages = Math.ceil(res.total / 10);

            if (this.page > this.totalPages) {
              this.$refs.my_scroller.finishInfinite(true);
            } else {
              for (let i = 0; i < res.rows.length; i++) {
                this.myData.push(res.rows[i]);
              }

              this.$refs.my_scroller.finishInfinite(false);
            }
          });
        }, 1000);
      }
    },
    //下拉刷新
    refresh: function () {
      this.page = 0;
      this.totalPages = 1;
      $(".pull-to-refresh-layer").show();
      $(".pull-to-refresh-layer .text").html("刷新成功");
      this.myData = [];
      this.timeout = setTimeout(() => {
        this.infinite();
        this.$refs.my_scroller.finishPullToRefresh();
        $(".pull-to-refresh-layer").hide();
      }, 1500);
    },
    
  },
};
</script>
<style lang="less" scoped>
.you {
  .ai {
    margin: 20px 20px 0 20px;
    font-size: 13px;
    text-align: center;
    img {
      display: inline-block;
      width: 18px;
      height: 20px;
    }
    .xian::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      border: 1.5px solid #D7AB66;
      background-color: #D7AB66;
      transform: translate(10px, -1px);
    }
    .xian::after {
      content: "";
      display: inline-block;
      width: 20px;
      // height: 30px;
      border-top: 1.5px solid #D7AB66;
      transform: translate(-15px, -3px);
    }
    span {
      color: #D7AB66;
      margin-left: 0.133262rem;
    }
    span::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      border: 1.5px solid #D7AB66;
      background-color: #D7AB66;
      transform: translate(95px, -1px);
    }
    span::after {
      content: "";
      display: inline-block;
      width: 20px;
      // height: 30px;
      border-top: 1.5px solid #D7AB66;
      transform: translate(17px, -3px);
    }
  }
  // 你可能还喜欢
  section {
    width: 95%;
    margin: 10px 10px 50px 10px;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    height: 500px;
    /* 四个产品*/
    .left {
      width: 50%;
      float: left;
    }
    /* 上 */
    div a > div:nth-child(1) {
      width: 82%;
      border: 1px solid #F5F5F5;
      margin: 15px auto 0;
    }
    div a > div {
      width: 82%;
      margin: 5px auto;
    }
    div img {
      width: 100%;
      /* margin: 20px; */
    }
    div p {
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 160px;
      white-space: nowrap;
    }
    /* 钱 */
    div span {
      font-size: 14px;
      color: #B48A44;
    }
    /* 购物车图标 */
    div .gouWu {
      font-size: 0.453092rem;
      float: right;
    }
  } //section
}
</style>
